import { React, useRef } from "react";
import "./index.css";
import "../../../index.css";
import axios from "axios";
import InterIP from "../../../IP/IP";

export default function AddAddress() {
  const changeName = useRef();
  const changearea = useRef();
  const changestreet = useRef();
  const changephone = useRef();
  const changecomment = useRef();
  // const navigate = useNavigate();
  let IP = InterIP().props.children;

  function saveSite() {
    var userID = document.cookie.slice(5);
    var Iphone = changephone.current.value * 1;
    if (!isNaN(Iphone)) {
      if (
        !changeName.current.value &&
        !changearea.current.value &&
        !changestreet.current.value &&
        !changecomment.current.value &&
        !Iphone &&
        !userID
      )
        return;
      axios
        .post("http://" + IP + ":3000/user/addAddress", {
          consignee: changeName.current.value,
          area: changearea.current.value,
          street: changestreet.current.value,
          contact_phone: Iphone,
          comment: changecomment.current.value,
          user_id: userID,
          default_address: "0",
        })
        .then((res) => {
          console.log(res);
          // navigate("/home/person/regulator", {});
          window.history.back();
        });
    } else {
      alert("你家电话号带字母的！！！");
    }
  }

  return (
    <div id="mybill">
      <div className="mybill_top">添加地址</div>
      <div className="augment_main">
        <ul className="tyc_area">
          <li>
            <span>*</span>
            <strong>收货人姓名：</strong>
            <input type="text" placeholder="收货人姓名" ref={changeName} />
          </li>
          <li>
            <span>*</span>
            <strong>选择地区：</strong>
            <input type="text" placeholder="收货人地区" ref={changearea} />
          </li>
          <li>
            <span>*</span>
            <strong>详细地址：</strong>
            <input
              type="text"
              placeholder="用于接收货物的详细地址"
              ref={changestreet}
            />
          </li>
          <li>
            <span>*</span>
            <strong>联系电话：</strong>
            <input type="text" placeholder="推荐使用手机号" ref={changephone} />
          </li>
          <li>
            <span>*</span>
            <strong>备注信息：</strong>
            <input type="text" placeholder="输入备注" ref={changecomment} />
          </li>
        </ul>
        <button className="augment_button" onClick={saveSite}>
          保存
        </button>
      </div>
    </div>
  );
}
